export default function normal() {
    var canvas = document.getElementById('heter-normal');
    var w = canvas.clientWidth;
    var h = canvas.clientHeight;
    var ctx = canvas.getContext('2d');
    canvas.width = w;
    canvas.height = h;
    ctx.width = w;
    ctx.height = h;
    ctx.fillStyle = 'rgba(0,0,0,0)';
    ctx.fillRect(0, 0, w, h);
    var px = 0, py = 0, dx = 1, dy = 0;
    function draw_normal() {
        ctx.save();
        ctx.fillStyle = 'rgba(255,215,0,1)';
        ctx.fillRect(px, py, 4, 4);
        ctx.restore();
        ctx.save();
        ctx.fillStyle = '	rgba(1,15,75,0.1)';
        ctx.fillRect(0, 0, w, h);
        ctx.restore();
        if (dx == -1) {
            px -= 4;
        } else if (dx == 1) {
            px += 4;
        } else { }
        if (dy == -1) {
            py -= 4;
        } else if (dy == 1) {
            py += 4;
        } else { }
        if (py == 0 && px < w) {
            dx = 1;
            dy = 0;
            py = 0;
        }
        if (py == 0 && px >= w) {
            px = w - 4;
            dy = 1;
            dx = 0;
        }
        if (px == w - 4 && py >= h) {
            py = h - 4;
            dy = 0;
            dx = -1;
        }
        if (py == h - 4 && px <= 0) {
            px = 0;
            dx = 0;
            dy = -1;
        }
        if (px == 0 && py <= 0) {
            py = 0;
            dx = 1;
            dy = 0;
        }
        requestAnimationFrame(draw_normal);
    };
    draw_normal();

}